<%@ page language="java" contentType="text/html; charset=UTF-8"  pageEncoding="UTF-8"%>
<%@ taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c" %>
<%@ taglib uri="http://java.sun.com/jsp/jstl/fmt" prefix="fmt" %>
<!DOCTYPE html>
<html lang="zh">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>登录</title>
    <c:set value="${pageContext.request.contextPath}" var="path" scope="page"/>
    <link rel="stylesheet" href="${path}/static/css/login.css">
    <script src="${path}/static/script/jQuery 3.5.1.min.js"></script>
</head>

<body>
    <div class="wrapper">
        <div class="container">
            <h1>Welcome</h1>

            <form class="form" method="post" action="login">
                <input type="text" placeholder="Username" name="username">
                <input type="password" placeholder="Password" name="password">
                <button type="submit" id="login-button">Login</button>
            </form>
        </div>
    </div>
    <script>
	    $("#login-button").click(function (event) {
	        event.preventDefault();     // 阻止提交表单
	        setTimeout(function () {    // 设置 500 毫秒后自动提交表单
	            $(".form").submit();
	        }, 1000);
	        $('form').fadeOut(500);
	        $('.wrapper').addClass('form-success');
	    });
    </script>
</body>

</html>